import 'package:bitotus_web/responsive.dart';
import 'package:flutter/material.dart';
import 'package:flutter_kit/basic/button.dart';
import 'package:flutter_kit/underground/underground.dart';

/// 根据屏幕大小来决定按钮尺寸
class DownloadButton extends StatelessWidget {
  final bool enable;
  final Function onTap;
  // 英文标题
  final String english;
  // 中文字
  final String chinese;
  const DownloadButton({
    required this.enable,
    required this.onTap,
    required this.english,
    required this.chinese,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final width = context.responsive<double>(
      130,
      pad: 170,
      computer: 200,
    );
    final height = context.responsive<double>(
      80,
      pad: 95,
      computer: 110,
    );
    final englishStyle = context.responsive<TextStyle>(
      const TextStyle(
        fontFamily: "caslon",
        color: COLOR.green,
        fontSize: 24,
      ),
      pad: const TextStyle(
        fontFamily: "caslon",
        color: COLOR.green,
        fontSize: 30,
      ),
      computer: const TextStyle(
        fontFamily: "caslon",
        color: COLOR.green,
        fontSize: 36,
      ),
    );
    final chineseStyle = context.responsive<TextStyle>(
      const TextStyle(
        fontFamily: "坊宋",
        fontSize: 14,
        color: COLOR.green,
        letterSpacing: 4,
      ),
      pad: const TextStyle(
        fontFamily: "坊宋",
        fontSize: 16,
        color: COLOR.green,
        letterSpacing: 10,
      ),
      computer: const TextStyle(
        fontFamily: "坊宋",
        fontSize: 17,
        color: COLOR.green,
        letterSpacing: 10,
      ),
    );

    return BasicButton(
      enable: enable,
      onTap: onTap,
      child: Stack(
        children: [
          Container(
            width: width,
            height: height,
            color: COLOR.green,
          ),
          Transform.translate(
            offset: const Offset(-3, -3),
            child: Container(
              width: width,
              height: height,
              decoration: BoxDecoration(
                color: COLOR.black,
                border: Border.all(width: 2, color: COLOR.green),
              ),
              child: Column(
                children: [
                  const Space(),
                  Text(english, style: englishStyle),
                  const SizedBox(height: 5),
                  Text(chinese, style: chineseStyle),
                  const Space(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
